<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>硬件信息-用户点评</title>
		<#include "/WEB-INF/ftl/user/include.ftl" />
		<link type="text/css" rel="stylesheet" href="${base}/css/user/side.css" />
		<link type="text/css" rel="stylesheet" href="${base}/css/user/hardware_info.css" />
		<link type="text/css" rel="stylesheet" href="${base}/css/user/hardware_info_comment.css" />
		<link type="text/css" rel="stylesheet" href="${base}/lib/rating/rating.css" />
		<script type="text/javascript" src="${base}/lib/jquery.js"></script>
		<script type="text/javascript" src="${base}/lib/jquery_raty/raty.js"></script>
		<script type="text/javascript" src="${base}/js/user/hardware_comment.js"></script>
	</head>
	<body>
		<#assign mainboard = Session.mainboard />
		<#assign id = mainboard.id?c />
		<#assign brand = mainboard.brand.brand />
		<#assign model = mainboard.model />
		<#include "/WEB-INF/ftl/user/header.ftl" />
		<div class="navigation">
			<a href="javascript:void(0);">首页</a>&nbsp;&gt;
			<a href="javascript:void(0);">主板</a>&nbsp;&gt;
			<a href="javascript:void(0);">${brand}主板</a>&nbsp;&gt;
			<a href="javascript:void(0);">${model}</a>&nbsp;&gt;
			<#if commentType == 1>
			用户点评
			<#else>
			专家点评
			</#if>
		</div>
		<div class="wrapper">
			<#include "/WEB-INF/ftl/user/side.ftl" />
			<h1 class="title">${model} 用户点评</h1>
			<div class="tab">
				<a href="${base}/mainBoardOverview.do?id=${id}">综述介绍</a>
				<a href="${base}/mainBoardParameter.do?id=${id}">参数</a>
				<a href="${base}/mainBoardPicture.do?id=${id}">图片</a>
				<#if commentType == 1>
				<a href="javascript:void(0);" class="selected">用户点评</a>
				<a href="javascript:void(0);">专家点评</a>
				<#else>
				<a href="javascript:void(0);">用户点评</a>
				<a href="javascript:void(0);" class="selected">专家点评</a>
				</#if>
			</div>
			<h2 class="head">评分统计</h2>
			<div class="score-statistics">
				<#assign star1Num = statisticsList[0] />
				<#assign star2Num = statisticsList[1] />
				<#assign star3Num = statisticsList[2] />
				<#assign star4Num = statisticsList[3] />
				<#assign star5Num = statisticsList[4] />
				<#assign totalNum = star1Num + star2Num + star3Num + star4Num + star5Num />
				<#assign averageScore = 0 />
				<#if totalNum != 0>
					<#assign averageScore = (20*star1Num + 40*star2Num + 60*star3Num + 80*star4Num + 100*star5Num) / totalNum />
				</#if>
				<div class="average">
					<h3>平均得分：</h3>
					<p class="score">${averageScore?round}</p>
					<p class="star"><span style="width:${averageScore}%;">&nbsp;</span></p>
					<p>（满分100）</p>
				</div>
				<div class="list">
					<h3>基于${totalNum}个用户点评，其中：</h3>
					<ul>
						<li>
							<span><a href="javascript:void(0);">1星</a>：</span>
							<#if totalNum == 0>
								<span class="bar"><span style="width:0;">&nbsp;</span></span>
							<#else>
								<span class="bar"><span style="width:${100*star1Num/totalNum}%;">&nbsp;</span></span>
							</#if>
							<span class="num">${star1Num}人</span>
						</li>
						<li>
							<span><a href="javascript:void(0);">2星</a>：</span>
							<#if totalNum == 0>
								<span class="bar"><span style="width:0;">&nbsp;</span></span>
							<#else>
								<span class="bar"><span style="width:${100*star2Num/totalNum}%;">&nbsp;</span></span>
							</#if>
							<span class="num">${star2Num}人</span>
						</li>
						<li>
							<span><a href="javascript:void(0);">3星</a>：</span>
							<#if totalNum == 0>
								<span class="bar"><span style="width:0;">&nbsp;</span></span>
							<#else>
								<span class="bar"><span style="width:${100*star3Num/totalNum}%;">&nbsp;</span></span>
							</#if>
							<span class="num">${star3Num}人</span>
						</li>
						<li>
							<span><a href="javascript:void(0);">4星</a>：</span>
							<#if totalNum == 0>
								<span class="bar"><span style="width:0;">&nbsp;</span></span>
							<#else>
								<span class="bar"><span style="width:${100*star4Num/totalNum}%;">&nbsp;</span></span>
							</#if>
							<span class="num">${star4Num}人</span>
						</li>
						<li>
							<span><a href="javascript:void(0);">5星</a>：</span>
							<#if totalNum == 0>
								<span class="bar"><span style="width:0;">&nbsp;</span></span>
							<#else>
								<span class="bar"><span style="width:${100*star5Num/totalNum}%;">&nbsp;</span></span>
							</#if>
							<span class="num">${star5Num}人</span>
						</li> 
					</ul>
				</div>
			</div>
			<div class="comment-tab">
				<a href="javascript:void(0);" class="selected">所有点评（${totalNum}）</a>
				<a href="javascript:void(0);">优点</a>
				<a href="javascript:void(0);">缺点</a>
			</div>
			<#if commentList?size == 0>
			<div class="empty">
				<div class="empty-msg">对不起，此产品暂无评论！</div>
			</div>
			<#else>
			<ul class="comment">
				<#list commentList as comment>
				<li class="comment-item">
					<#assign userName = comment.userName />
					<#assign score = comment.score />
					<#assign time = comment.time />
					<#assign title = comment.title />
					<#assign good = comment.good!"" />
					<#assign bad = comment.bad!"" />
					<#assign summary = comment.summary!"" />
					<div class="user_info">
						<p class="photo"><img width="50" height="50" src="${base}/photo/default.jpg" alt="" /></p>
						<p>${userName}</p>
						<p>2012-03-21</p>
					</div>
					<div class="user_comment">
						<div class="triangle">&nbsp;</div>
						<p class="head">
							<span class="star"><span style="width:${score}%;">&nbsp;</span></span>
							<span class="score">${score}</span>
							<span class="time">发表于：${time}</span>
						</p>
						<h3><span>${title}</span></h3>
						<ul>
							<li class="good"><span>优点</span>${good?replace('\\s+', ' ', 'r')}</li>
							<li class="bad"><span>缺点</span>${bad?replace('\\s+', ' ', 'r')}</li>
							<li class="summary"><span>总结</span>${summary?replace('\\s+', ' ', 'r')}</li>
						</ul>
					</div>
				</li>
				</#list>
			</ul>
			<div class="page-bar">
				<a href="javascript:void(0);">&lt;上一页</a>
				<a href="javascript:void(0);" class="selected">1</a>
				<a href="javascript:void(0);">2</a>
				<a href="javascript:void(0);">3</a>
				<a href="javascript:void(0);">4</a>
				<a href="javascript:void(0);">5</a>
				<span>...</span>
				<a href="javascript:void(0);">82</a>
				<a href="javascript:void(0);">下一页&gt;</a>
			</div>
			</#if>
			<div class="comment-post">
				<div class="comment-post-hd">
					<span>我来点评</span>
				</div>
				<#if Session.user??>
				<form onsubmit="return false;" class="comment-post-bd">
					<ul>
						<li>
							<span class="field">评分：</span>
							<span id="star"></span>
							<span id="target"></span>
							<script type="text/javascript">
								$('#star').raty({
									hints : ['极烂', '差', '一般', '好', '完美'],
									path : '${base}/image/',
									target : '#target',
									click : function(score, evt) {
										$('#score').val(20*score);
									}
								});
							</script>
							<input type="hidden" name="comment.hardwareType.value" value="mainboard" id="hardwareType" />
							<input type="hidden" name="comment.hardwareId" value="${id}" id="hardwareId" />
							<input type="hidden" name="comment.score" id="score" />
						</li>
						<li>
							<span class="field">标题：</span>
							<input type="text" name="comment.title" id="title" class="input-text" />
							<p>必填</p>
						</li>
						<li>
							<span class="field">优点：</span>
							<textarea rows="3" cols="40" name="comment.good" id="advantage"></textarea>
						</li>
						<li>
							<span class="field">缺点：</span>
							<textarea rows="3" cols="40" name="comment.bad" id="disadvantage"></textarea>
						</li>
						<li>
							<span class="field">总结：</span>
							<textarea rows="3" cols="40" name="comment.summary" id="summary"></textarea>
						</li>
						<li>
							<input type="submit" value="提交点评" onclick="submitComment();" class="input-button" />
						</li>
					</ul>
				</form>
				<#else>
				<div class="comment-post-bd">
					<p class="login-msg">点评前请先登录！</p>
				</div>
				</#if>
			</div>
		</div>
		<#include "/WEB-INF/ftl/user/footer.ftl" />
	</body>
</html>
